<script setup lang="ts">
import Menu from '@/components/Menu.vue'
import BackTop from '@/components/BackTop.vue'
import Footer from '@/components/Footer.vue'
import store from 'store'

import {useRouter} from 'vue-router'

const router = useRouter()
import {onMounted, ref} from "vue"

import {useSystem} from "@/stores/system"
import config from '@/config.ts'

const storeSystem:any = useSystem()

let indexWatch = ref(storeSystem.indexWatch)
let menuShow = ref(storeSystem.menuShow)
let tabs = ref(storeSystem.tabs)
let lastRoute = ref({})
//监视路由变化
storeSystem.$subscribe(() => {
  indexWatch.value = storeSystem.indexWatch
  tabs.value = storeSystem.tabs
  lastRoute.value = store.get('lastRoute')
  menuShow.value = storeSystem.menuShow
  // console.log(menuShow)
})
let watermark = ref(['空用户', 'WOS-UI FOR Ruyi'])
onMounted(() => {
  const token = store.get('token')
  const lastRoute = store.get('lastRoute')
  if (token) {
    //如果未选择项目，则跳转到项目首页
    if (lastRoute.path) {
      router.push({path: lastRoute.path})
    } else {
      router.push({path: '/home/console'})
    }
  } else {
    router.push({path: '/login'})
  }
  let user = store.get('user')
  watermark.value = [user.nickName, config.webTitle]
})
//关闭tab
const close = (tab) => {
  storeSystem.removeTabs(tab.fullPath)
  // @ts-ignore
  tell.log('点击关闭')
}
const tabClick = (tab) => {
  router.push({path: tab.fullPath})
}
const menuShowSwitch = () => {
  storeSystem.menuShowSwitch()
}

</script>

<template>
  <Menu></Menu>
  <BackTop/>
  <main>
    <el-watermark :content="watermark">
      <el-row>
        <el-col :span="menuShow?2:0">
          <nav>

            <div class="wos-flex wos-flex-row wos-flex-right">
              <img @click="menuShowSwitch" src="/assets/icon/menu-ctrl.svg" alt="Open" class="menu-ctrl">
            </div>

            <ul>
              <li class="wos-flex wos-flex-row wos-flex-between" v-for="(tab, index) in tabs" :key="index"
                  :class="tab.fullPath == lastRoute['fullPath'] ? 'active' : ''">
                <div @click="close(tab)">
                  <img v-if="tab.fullPath == lastRoute['fullPath']" class="close-icon" src="/assets/icon/close-white.svg" alt="X">
                  <img v-else class="close-icon" src="/assets/icon/close-grey.svg" alt="X">
                </div>
                <div @click="tabClick(tab)" class="link wos-title-ellipsis-1">{{ tab.meta.title }}</div>
              </li>
            </ul>
          </nav>
        </el-col>
        <el-col :span="menuShow?22:24">
          <router-view></router-view>
        </el-col>
      </el-row>
    </el-watermark>
  </main>
  <Footer/>
</template>

<style scoped lang="scss">
main {
  padding: 30px;
}

nav {
  //padding: 0 10px 0 0;
  border-right: 1px solid rgba(145, 148, 154, 0.42);
  margin-right: 10px;
  min-height: 100vh;
}

li {
  cursor: pointer;
  margin-bottom: 10px;
  padding: 5px 10px;
  text-align: right;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

li > .link:hover {
  color: #5D7DF3;
}

.active {
  color: #FFFFFF;
  background-color: #5D7DF3;
}

.active:hover {
  background-color: rgba(93, 125, 243, 0.95);
}

.active .link:hover {
  color: #FFFFFF;
}

.close-icon {
  width: 20px;
  height: 20px;
  padding-top: 5px
}

.menu-ctrl {
  width: 20px;
  height: 20px;
  margin: 0 10px 20px 0;
  cursor: pointer;
}
</style>